import React, { FC, useEffect } from 'react';
import { IRouteComponentProps, useSelector, useDispatch } from 'umi';
import './knowledge.less';
import Know from '../../components/know';
import RightTop from "../../components/rightTop"
import RightBottom from "../../components/rightBottom"
import { Iknow,Ireading ,Iartice} from '../../utils/know';
const Knowledge: React.FC<IRouteComponentProps> = () => {
  //列表数据
  const list = useSelector((state: { index: any }) => state.index);
  // //阅读数据
  // const readList=useSelector((state:{index:any})=>state.index);
  
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch({
      type: 'index/getlist'
    });
    dispatch({
      type: 'index/readinglist'
    });
    dispatch({
      type: 'index/getarticle'
    });
  }, []);
  return (
    <div className="know">
      <main>
        <div className="main">
          <div className="left">
            {list.knowList[0] &&
              list.knowList[0].map((item: Iknow, index: number) => {
                return <Know key={index} item={item} />;
              })}
          </div>
          <div className="right">
            <div className="right_top">
               <h3>推荐阅读</h3>
              {
               list.readList&&list.readList.map((item:Ireading,index:number)=>{
                return <RightTop key={index} item={item} />
               })
              }
            </div>
            <div className="right_bottom">
              <h3>文章分类</h3>
              {
              list.articleList&&list.articleList.map((item:Iartice,index:number)=>{
                return  <RightBottom key={index} item={item}/>
              })
              }
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};

export default Knowledge;
